<template>
	<view style="height: 100%;" class="bg-white">
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">私信列表</block>
		</cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="container">
				<block v-for="(item,index) in dataList" :key="index">
					<tui-list-cell class="solid-bottom" @click="jumpToConversation(item)" :unlined="true">
						<view class="tui-chat-item">
							<view class="tui-msg-box">
								<image @click.stop="jumpToUserProfile(item.receiver.user_id)" :src="item.receiver.avatar" class="tui-msg-pic"
									mode="widthFix"></image>
								<view class="tui-msg-item">
									<view class="tui-msg-name">{{item.receiver.nickname}}</view>
									<view class="tui-msg-content">{{item.last_message}}</view>
								</view>
							</view>
							<view class="tui-msg-right">
								<view class="tui-msg-time">{{item.show_time}}</view>
								<tui-badge type="danger" :dot="false"
									v-if="item.unread_count>0">{{item.unread_count}}</tui-badge>
							</view>
						</view>
					</tui-list-cell>
				</block>
				<view class="tui-safearea-bottom"></view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getTimeDistance
	} from '@/api/utils.js'
	import {
		getConversationList
	} from '@/api/api.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import config from '@/api/config.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		methods: {
			jumpToUserProfile(userId) 
			{
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + userId
				})
			},
			jumpToConversation(conversation) {
				if(conversation.is_attention == 0) {
					uni.showModal({
						title:'请先关注他再发小纸条!'
					})
					return
				}
				let toUser = conversation.receiver
				uni.navigateTo({
					url: '/pages/always/conversation/conversation?toId='+toUser.user_id+'&toName='+toUser.nickname
				})
			},
			getDataList(pageIndex, pageSize) {
				getConversationList(pageIndex, pageSize).then(res => {
					res.data.list.forEach(item => {
						item.show_time = getTimeDistance(item.last_message_time)
					})
					let pageList = res.data.list
					if (pageIndex == 0) {
						this.dataList = pageList
					} else {
						this.dataList = this.dataList.concat(pageList)
					}
					let hasNext = pageList.length >= pageSize
					if (this.mescroll) {
						this.mescroll.endSuccess(this.dataList.length, hasNext);
					}
				}).catch(error => {
					if (this.mescroll) {
						this.mescroll.endErr()
					}
				})
			},
			downCallback() {
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				this.getDataList(pageIndex, page.size)
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 100rpx
	}

	/*tabbar*/

	.tui-tabbar {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99999;
		background-color: #fff;
		height: 100rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d2d2d2;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
		height: 80rpx;
	}

	.tui-ptop-4 {
		padding-top: 4rpx;
	}

	.tui-scale {
		font-weight: bold;
		transform: scale(0.8);
		transform-origin: center 100%;
		line-height: 30rpx;
	}

	.tui-item-active {
		color: #00c0fb !important;
	}

	/*tabbar*/

	/*searchbox*/

	.tui-searchbox {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tui-search-input {
		width: 100%;
		height: 72rpx;
		background: #fafafa;
		border-radius: 36rpx;
		font-size: 30rpx;
		color: #A8ABB8;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-search-text {
		padding-left: 16rpx;
	}

	/*searchbox*/

	.tui-chat-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
	}

	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 28rpx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76rpx;
		padding-bottom: 10rpx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #9397a4;
	}
</style>
